<template>
<div>
  <van-nav-bar
      class="navbar"
      :title=title
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="goBack"
      fixed

  >
    <template #right>
      <van-icon name="ellipsis" size="18"/>
    </template>
  </van-nav-bar>
</div>
</template>

<script>
import Vue from 'vue';
import { NavBar,Icon } from 'vant';

Vue.use(NavBar);
Vue.use(Icon);
export default {
name: "navbar",
  props:{
  title:{
    type:String,
    default:"商品"
  }
  },
  methods:{
    goBack(){
      this.$router.back();
    }
  }
}
</script>

<style lang="less" scoped>
.navbar{
  /deep/ .van-nav-bar__left--text{
    color: #FF6A51;
    background-color: #FF7700;
  }
}
.van-nav-bar {
  background-color: #ff5e41;
}
::v-deep .van-icon {
  color: #fff;
}
::v-deep .van-nav-bar__text {
  color: #fff;
}
::v-deep .van-ellipsis {
  color: #fff;
}
</style>